<template lang="pug">
.header-wrap
    .top
        el-menu(
            :default-active="path"
            mode="horizontal"
            text-color="#000"
        )
            el-menu-item(:index='item.label' v-for="(item,i) in menuList" :key="i" @click="choseMenu(item)") {{item.label}}
    .bot(v-if="nowList.length>0")
        .now-menu
            .now-li(:class="{active:item.active}" v-for="item in nowList" :key="item.a" @click="choseItem(item)")
                img(:src="item.icon")
                .label {{item.label}}
    .right-top
        img(src="@/assets/images/more.png")
        .right-list
            .right-li(v-for="item in rightList" :key="item.a" @click="choseRight(item)")
                .label {{item.label}}
.header-cont
    router-view(v-slot="{ Component }")
        keep-alive
            component(:is="Component")
favoritesList(ref="favoritesListRef")
downViewHis(ref="downViewHisRef")
authorizeDialog(ref="authorizeDialogRef")
lastLogs(ref="lastLogsRef")
aboutApp(ref="aboutAppRef")
aiSet(ref="aiSetRef")

</template>
<script setup>
import favoritesList from '@/components/favoritesList.vue'//收藏夹
import downViewHis from '@/components/downViewHis.vue'//下载，浏览记录

import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { storageGet, storageClear, storageSet } from '@/utils'
import apis from '@/apis'
import { success, warning } from '@/utils/message'
import { muenStore } from '@/stores'

import authorizeDialog from '@/views/helper/authorizeDialog.vue'//授权
import lastLogs from '@/views/helper/lastLogs.vue'//更新日志
import aboutApp from '@/views/helper/aboutApp.vue'//关于应用
import aiSet from '@/views/helper/aiSet.vue'//ai配置


import wenjiansousuo from '@/assets/images/wenjiansousuo.png'
import bangzhu from '@/assets/images/bangzhu.png'
import shangchuan from '@/assets/images/shangchuan.png'
import xiazai from '@/assets/images/xiazai.png'

import guanyu from '@/assets/images/guanyu.png'
import piliangdaochu from '@/assets/images/piliangdaochu.png'
import piliangdaoru from '@/assets/images/piliangdaoru.png'
import rizhigengxin from '@/assets/images/rizhigengxin.png'
import shouquan from '@/assets/images/shouquan.png'

const path = ref('知识检查')

//菜单
const menuList = ref([
    { label: '知识检索', path: '/knowledgeRetrieval'
    // children: [
    //     { label: '知识检索', icon: wenjiansousuo, path: '/knowledgeRetrieval' }
    //     { label: '规范文档检索', icon: u250, path: '/documentRetrieval' }
    // ]
    },
    { label: '规范库查阅', path: '/standardLibrary?type=0' },
    { label: '规范入库', path: '/standardLibrary?type=1'
    // children: [
    //     { label: '导入', icon: shangchuan },
    //     { label: '批量导入', icon: piliangdaoru },
    //     { label: '导出', icon: xiazai },
    //     { label: '批量导出', icon: piliangdaochu }
    // ]
    },
    { label: '帮助', children: [
        { label: '帮助说明', path: '/helperPage', icon: bangzhu },
        { label: '软件授权', icon: shouquan },
        { label: '更新日志', icon: rizhigengxin },
        { label: '关于知识库', icon: guanyu }
    ] },
    { label: 'AI问答', children: [
        { label: 'AI问答', path: '/gptPage', icon: bangzhu },
        { label: 'AI配置', icon: shouquan }
    ] }
])
//右上角菜单

const rightList = ref([
    { label: '收藏夹' },
    { label: '下载记录' },
    { label: '最近浏览' }
])
const favoritesListRef = ref()
const downViewHisRef = ref()
const choseRight = (item) => {
    if(item.label == '收藏夹'){
        favoritesListRef.value.open()
    }
    if(item.label == '下载记录'){
        downViewHisRef.value.open('下载记录')
    }
    if(item.label == '最近浏览'){
        downViewHisRef.value.open('浏览记录')

    }
}


//当前子菜单
const nowList = ref([])
const choseMenu = (item) => {
    nowList.value = []
    if(item.path){
        router.push(item.path)
    }
    if(item.children){
        nowList.value = item.children
        if(item.children[0].path){
            item.children.forEach(e => {
                e.active = false
            })
            item.children[0].active = true
            router.push(item.children[0].path)
        }
    }
}
const authorizeDialogRef = ref()
const lastLogsRef = ref()
const aboutAppRef = ref()
const aiSetRef = ref()
const choseItem = (item) => {
    nowList.value.forEach(e => {
        e.active = false
    })
    item.active = true
    if(item.path){
        router.push(item.path)
    }
    if(item.label == '软件授权'){
        authorizeDialogRef.value.open()
    }
    if(item.label == '更新日志'){
        lastLogsRef.value.open()
    }
    if(item.label == '关于知识库'){
        aboutAppRef.value.open()
    }
    if(item.label == 'AI配置'){
        aiSetRef.value.open()
    }

}

const router = useRouter()
const route = useRoute()
const userInfo = ref({})


onMounted(()=>{
    menuList.value.forEach(val => {
        if(val.children){
            val.children.forEach(e => {
                if(e.path == route.path){
                    path.value = val.label
                    nowList.value = val.children
                    choseItem(e)
                }
            })
        }else if(val.path == route.fullPath){
            path.value = val.label
            choseMenu(val)
        }
    })
})
</script>
<style lang="less" scoped>
.header-cont{
    height: calc(100vh - 90px);
}
.header-wrap{
    padding: 0 10px;
    height:90px;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 0 5px 0 #ccc;
    position: relative;
    .right-top{
        position: absolute;
        z-index: 1;
        right: 20px;
        top: 15px;
        img{
            height: 20px;
            width: 20px;
        }
        .right-list{
            background: #fff;
            border-radius: 2px;
            position: absolute;
            top: 50%;
            right: 0;
            display: none;
            width: 100px;
            font-size: 12px;
            line-height: 20px;
            box-shadow: 0 0 5px 0 #ccc;
            border: 1px solid #ccc;
            .right-li{
                border-bottom: 1px solid #ccc;
                cursor: pointer;
                text-align: center;
                &:hover{
                    background: #f5f5f5;
                }
                &:last-child{
                    border-bottom: none;
                }
            }
        }
        &:hover .right-list{
            display: block;
        }
    }
    .top{
        height: 40px;
        padding-top: 2px;
    }
    :deep(.el-menu--horizontal>.el-menu-item){
        height: 40px;
        font-size: 16px;
    }
    :deep(.el-menu--horizontal.el-menu){
        border-bottom: none;
        height: 40px;
    }
    .now-menu{
        display: flex;
        align-items: center;
        height: 50px;
        .now-li{
            text-align: center;
            font-size: 14px;
            padding: 0 10px;
            border-right: 1px solid #ccc;
            cursor: pointer;
            &:hover{
                opacity: .9;
            }
            &.active{
                color: #409eff;
                img{
                    filter:sepia(100%);
                }
            }
            img{
                width: 20px;
                height: 20px;
            }
            &:last-child{
                border-right: none;
            }
        }
    }
}
</style>